<template>
  <div class="collection-caontainer" style="width: 897px">
    <div class="container">
      <div class="collection">
        <h1>我的收藏</h1>
        <div class="home-page">
        <el-card v-for="item,i in this.collectionList" :key="i" class="box-card">
          <div slot="header">
            <span>商品名称：{{item.goodName}}</span>  
            <el-button style="float: right; padding: 3px" type="primary" @click="buyGood(item.goodImg,item.goodName,item.goodPrice,item.collector,item.saler,item.goodId,item.id)">购买</el-button>
          </div>
          <div class="item-content">
            <el-image
              style="width: 200px; height: 200px"
              :src="item.goodImg">
            </el-image>
            <div class="item-content-content">
              <p>商品价格：￥{{item.goodPrice}}</p>
              <span style="color: green;margin-right:30px">发布人：{{item.saler}}</span>
            </div>
          </div>
        </el-card>
      </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getCollectionList} from '@/api/collection/index.js'
import {buyGood} from '@/api/collection/index.js'
import {delCollection} from '@/api/collection/index.js'
import {delGood} from '@/api/homepage/index.js'
export default {
  data() {
    return {
      collectionList:[]
    }
  },
  methods:{
    init() {
      let collector = JSON.parse(localStorage.getItem('user')).username
      getCollectionList(collector).then(res=>{
        console.log(res.data);
        this.collectionList = res.data.data
      })
    },
    buyGood(goodImg,goodName,goodPrice,collector,saler,goodId,id){
      // console.log(goodImg,goodName,goodPrice,collector,saler,id);
      let buyInfo = {}
      buyInfo.goodName = goodName
      buyInfo.price = goodPrice
      buyInfo.sallerName = saler
      buyInfo.buyerName = collector
      buyInfo.goodImg = goodImg
      // console.log(buyInfo);
      // 提交购买请求
      buyGood(buyInfo).then(() => {
        // console.log(res.data);
        delGood(goodId).then(() => {
          this.init()
        })
        delCollection(id).then(()=>{
          this.init()
        })
      })
    }
  },
  created() {
    this.init()
  }
}
</script>

<style scoped>
.home-page {
  display: flex;
  flex-wrap: wrap;
}
.box-card{
  width: 30%;
  margin: auto;
}
</style>